import { trendAlarm } from "@/api/modules/iot/alarm";
import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
export default defineComponent({
	props: {
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		const state = reactive({
			title: "告警趋势（近30天）",
			inout: {
				show: false,
				total: 0, //今日总识别
				totalChange: false,
				stranger: 0, //陌生人
				strangerChange: false,
				shouldArrive: 0, //预约访客
				shouldArriveChange: false,
				arrived: 0, //预约实到访客,
				changeStatus: null as any
			}
		});
		const trendChartOpts = reactive({
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} 次",
				axisPointer: {
					type: "shadow"
				}
			} as any,
			toolbox: { show: false },
			legend: { show: false },
			xAxis: {
				splitLine: { show: false },
				axisLine: { lineStyle: { color: "#7ac0c6" } },
				axisLabel: { rotate: 0, textStyle: { color: "#7ac0c6" } },
				data: [] as any[],
				type: "category",
				boundaryGap: false
			},
			yAxis: {
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#083f3a" } },
				axisLabel: { show: false, formatter: `{value}` }
			},
			grid: {
				left: "15",
				right: "15",
				bottom: "5%",
				top: "10px",
				containLabel: true
			},
			series: [
				{
					type: "line",
					smooth: true,
					showSymbol: false,
					name: "告警次数",
					lineStyle: {
						color: "#14dcd7",
						width: 4
					},
					//区域图-背景
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0, //底部
								color: "#0b4d44"
							},
							{
								offset: 0.3, //50%位置
								color: "#0b4d44"
							},
							{
								offset: 1, //顶部
								color: "#0b4d4400"
							}
						])
					},
					markPoint: null,
					emphasis: {
						focus: "series",
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)"
						}
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();

		watchEffect(() => {
			if (props.dashboardData?.inOutTrend?.length) {
				trendChartOpts.xAxis.data = [];
				trendChartOpts.series[0].data = [];
				trendChartOpts.series[0].name = "人员出入";
				props.dashboardData?.inOutTrend.forEach((item: any) => {
					trendChartOpts.xAxis.data.push(dayjs(item.xData + " 00:00:00").format("MM-DD"));
					trendChartOpts.series[0].data.push(item.yData);
				});
				trendChart.value?.setChart(trendChartOpts);
			}
			if (props.dashboardData?.inoutTotal?.total) {
				state.inout.show = true;
				if (state.inout.changeStatus) {
					clearTimeout(state.inout.changeStatus);
					state.inout.changeStatus = null;
				}
				state.inout.totalChange = state.inout.total != props.dashboardData.inoutTotal.total;
				state.inout.total = props.dashboardData.inoutTotal.total;

				state.inout.strangerChange = state.inout.stranger != props.dashboardData.inoutTotal.stranger;
				state.inout.stranger = props.dashboardData.inoutTotal.stranger;

				state.inout.shouldArriveChange = state.inout.shouldArrive != props.dashboardData.inoutTotal.shouldArrive;
				state.inout.shouldArrive = props.dashboardData.inoutTotal.shouldArrive;

				//移除动画
				state.inout.changeStatus = setTimeout(() => {
					clearTimeout(state.inout.changeStatus);
					state.inout.totalChange = false;
					state.inout.strangerChange = false;
					state.inout.shouldArriveChange = false;
					state.inout.changeStatus = null;
				}, 6 * 1000);
			}
		});
		onMounted(async () => {
			trendChartOpts.xAxis.data = [];
			trendChartOpts.series[0].data = [];
			// for (let i = 30; i > 0; i--) {
			// 	trendChartOpts.xAxis.data.push(dayjs().add(-i, "d").format("MM-DD"));
			// }
			// // trendChartOpts.xAxis.data = ["1", "1", "1", "1", "1", "1", "1"];
			// trendChartOpts.series[0].data = ["1", "10", "51", "71", "21", "41", "81"];

			let timeStamp = `${dayjs().add(-30, "d").format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`;
			let { result } = await trendAlarm({ timeStamp });
			let data: any = result || {};
			Object.keys(data).map((day: any) => {
				trendChartOpts.xAxis.data.push(dayjs(day + " 00:00:00").format("MM-DD"));
				trendChartOpts.series[0].data.push(data[day].total);
			});
			trendChart.value?.setChart(trendChartOpts);
		});
		return () => {
			return (
				<div class="h-full item-container">
					<div class="title">{state.title}</div>
					<div class="chart-container pt-4 pb-4 pl-2 pr-2">
						{state.inout.show ? (
							<div class="inout-total animate__animated animate__fadeInRight">
								<div class="item">
									<div class="label">今日总识别</div>
									<div
										class={[
											"flex justify-center item.scss-center",
											state.inout.totalChange ? "animate__animated animate__heartBeat animate__infinite" : ""
										]}
									>
										<div class="value">{state.inout.total}</div>
										<div class="unit">人</div>
									</div>
								</div>
								<div class="item">
									<div class="label">预约访客</div>
									<div
										class={[
											"flex justify-center item.scss-center",
											state.inout.shouldArriveChange ? "animate__animated animate__heartBeat animate__infinite" : ""
										]}
									>
										<div class="value">{state.inout.shouldArrive}</div>
										<div class="unit">人</div>
									</div>
								</div>
								<div class="item">
									<div class="label">陌生人</div>
									<div
										class={[
											"flex justify-center item.scss-center",
											state.inout.strangerChange ? "animate__animated animate__heartBeat animate__infinite" : ""
										]}
									>
										<div class="value">{state.inout.stranger}</div>
										<div class="unit">人</div>
									</div>
								</div>
							</div>
						) : null}
						<BaseChart ref={trendChart} height="95%" class="flex items-center" />
					</div>
				</div>
			);
		};
	}
});
